<template>
  <el-dialog append-to-body class="common_dialog" custom-class="reset-dialog-width" :visible.sync="visible" :title="!queryParams.id ?'添加商品' : '修改商品'" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form :model="form" :rules="dataRule" ref="form" label-width="120px">
      <el-form-item label="分类" prop="goodsTypeId">
        <el-select v-model="form.goodsTypeId" placeholder="请选择分类" clearable>
          <el-option v-for="item in inGoodsTypeList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="衣服分类" prop="clothingCategoryId">
        <el-select v-model="form.clothingCategoryId" placeholder="请选择衣服分类" clearable>
          <el-option v-for="item in inClothingCategoryList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="衣服档位" prop="level">
        <el-input v-model="form.level" placeholder="请输入衣服档位" clearable />
      </el-form-item>
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="form.title" show-word-limit :maxlength="20" placeholder="请输入商品名称" clearable />
      </el-form-item>
      <el-form-item label="首图" prop="image">
        <ImageUpload :value="form.image" @input="inputImage" :limit="1" :isShowTip="false"></ImageUpload>
      </el-form-item>
      <el-form-item label="轮播图" prop="images">
        <ImageUpload :value="form.images" @input="inputImages" :limit="10" :isShowTip="false"></ImageUpload>
      </el-form-item>
      <el-form-item label="套餐" prop="packageStatus">
        <el-switch v-model="form.packageStatus" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="原价" prop="originalPrice">
        <el-input-number v-model="form.originalPrice" :precision="2" :step="0.1"></el-input-number>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number v-model="form.price" :precision="2" :step="0.1"></el-input-number>
      </el-form-item>
      <el-form-item label="排序" prop="weigh">
        <el-input-number v-model="form.weigh" :step="1" step-strictly></el-input-number>
        <!-- <el-input v-model="form.name" placeholder="请输入排序" clearable /> -->
      </el-form-item>
      <el-form-item label="开关" prop="switchFlag">
        <el-switch v-model="form.switchFlag" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="置顶" prop="topSwitch">
        <el-switch v-model="form.topSwitch" :active-value="1" :inactive-value="0">
        </el-switch>
      </el-form-item>
      <el-form-item label="图文介绍" prop="content">
        <Editor v-model="form.content" :min-height="192" />
      </el-form-item>

    </el-form>
    <template slot="footer">
      <el-button :loading="confirmLoading" type="primary" @click="formSubmitHandle()">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'
import { goodsSave, getGoods } from "@/api/goods/goodList/goodlList";
import { clothingCategoryList } from "@/api/goods/clothingCategory/clothingCategory";
import { goodsTypeList } from "@/api/goods/goodsType/goodsType";
export default {
  dicts: ['jiekee_goods_cabinet_norms'],
  data() {
    return {
      visible: false,
      form: {
        id: null,
        goodsTypeId: '',
        clothingCategoryId: '',
        level: '',
        title: '',
        image: '',
        images: '',
        packageStatus: '',
        originalPrice: '',
        price: '',
        weigh: '',
        switchFlag: '',
        topSwitch: '',
        content: '',

      },
      confirmLoading: false,
      queryParams: {},
      inClothingCategoryList: [],
      inGoodsTypeList: [],
    }
  },

  computed: {
    dataRule() {
      var validateContent = (rule, value, callback) => {
        if (this.quillEditor.getLength() <= 1) {
          return callback(new Error('请填写图文介绍'))
        }
        callback()
      }
      return {
        goodsTypeId: [
          { required: true, message: '请选择分类', trigger: 'change' }
        ],
        clothingCategoryId: [
          { required: true, message: '请选择衣服分类', trigger: 'change' }
        ],
        title: [
          { required: true, message: '请输入商品名称', trigger: 'change' }
        ],
        // image: [
        //   { required: true, message: '请选择首图', trigger: 'change' }
        // ],
        // images: [
        //   { required: true, message: '请选择轮播图', trigger: 'change' }
        // ],
        originalPrice: [
          { required: true, message: '请输入原价', trigger: 'change' }
        ],
        price: [
          { required: true, message: '请输入价格', trigger: 'change' }
        ],
        // content: [
        //   { validator: validateContent, trigger: 'change' }
        // ],

      }

    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['form'].resetFields()
        this.reset()
        this.confirmLoading = false
        clothingCategoryList().then((res) => {
          this.inClothingCategoryList = res.data
        })
        goodsTypeList().then((res) => {
          this.inGoodsTypeList = res.data
        })
        this.form.id = this.queryParams.id ? this.queryParams.id : ''
        this.queryParams.id ? this.getInfo() : ''
      })
    },
    // 重置表单
    reset() {
      this.form = {
        id: null,
        goodsTypeId: '',
        clothingCategoryId: '',
        level: '',
        title: '',
        image: '',
        images: '',
        packageStatus: '',
        originalPrice: '',
        price: '',
        weigh: '',
        switchFlag: '',
        topSwitch: '',
        content: '',
      };
    },
    inputImage(val) {
      this.form.image = val
    },
    inputImages(val) {
      this.form.images = val
    },
    // 获取信息
    getInfo() {
      const id = this.queryParams.id
      getGoods(id).then(response => {
        this.form = response.data;
      });
    },

    // 表单提交
    formSubmitHandle: debounce(function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.confirmLoading = true
          goodsSave(this.form).then(response => {
            this.$modal.msgSuccess("操作成功");
            this.visible = false
            this.confirmLoading = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.confirmLoading = false
          });
        }
      })
    }, 1000, { 'leading': true, 'trailing': false }),

  }
}
</script>
<style lang="scss" scoped>
#J_quillEditor {
  min-height: 400px;
}
</style>
